<template>
	<view>
		<view class="flex-start mt-30 pb-15">
			<view class="ml-35  mb-13 " style="display: flex;">
				<image src="@/static/icon/iconPosition.png" mode="widthFix" class="w-25 mt-2"></image>
				<span class="text-333 fz24 ml-10">
					<city is_all="true" :value="pickerForm.current_city_id" @change="onChangeArea">
						{{ pickerForm.current_city_name || $t('选择城市') }}
					</city>
				</span>
				<image src="@/static/icon/iconDownFilter.png" mode="widthFix" class="w-20 ml-13 mt-10"
					style="margin-top: 13rpx;">
				</image>
			</view>
			<view class="ml-50 f" style="display: flex;">
				<span class="text-333 fz24 ml-10">
					<picker @change="bindPickerChange" :value="service_index" :range="service_array">
						<view class="uni-input">{{ service_array[service_index] }}</view>
					</picker>
				</span>
				<image src="@/static/icon/iconDownFilter.png" mode="widthFix" class="w-20 ml-13 mt-10"
					style="margin-top: 13rpx;">
				</image>
			</view>
		</view>


		<scroll-view @scrolltolower="scrolltolowers()" :scroll-y="true"  lower-threshold="250"   :style="{ height: getHeight() }">

			<!-- 新的列表 -->
			<view :class="['newListSty',`level${item.level}`]" v-for="(item, idx) in lists" :key="item.id">
				<template v-if="item.level">
					<view class="base-info-w" @click="xuanzhong(item, idx)">
						<view class="img">
							<image
								:src="getImageUrl(item.avatar)"
								mode="aspectFill"
							/>
						</view>
						<view class="right-base-info">
							<view class="name">{{ lang == 'zh' ? item.username : item.username_ru  }}</view>
							<view class="address">
								<flag class="w-30 h-20 mr-4" :country="item.country" />
								<view class="address-text">{{ lang == 'zh' ? item.area.mergename :
												item.area.mergename_ru  }}</view>
							</view>
							<view class="start-wrapp">
								<view class="start">
									<image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
									<image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
									<image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
									<image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
									<image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
								</view>
								<view class="start-text">{{$t('综合评分')}}：{{ item.rating }}</view>
							</view>
						</view>
					</view>
					<view class="tabs-listx">
						<view 
							:class="['tabxxx',item.select && 'active']" 
							v-for="(item, index) in item.vehicleSelectList" :key="index"
							@click="selectVehicle(item, idx)"
						>
							<image :src="`/static/mingpian/${index + 1}-a.png`" v-if="item.select"/>
							<image :src="`/static/mingpian/${index + 1}.png`" v-else/>
							<text>{{ item.count || 0 }}</text>
						</view>
					</view>

					<scroll-view scroll-x v-if="item.car.length > 0">
						<view class="cart-wrax">
							<view class="carx" v-for="(carItem, imgIndex) in item.car" :key="imgIndex">
								<image v-if="carItem.image" :src="getImageUrl(carItem.image)" mode="aspectFill"></image>
								<image v-else src="/static/img/defaultImg.png" mode="aspectFill" class="w-150 h-120"></image>
								<view class="txt">{{  carItem.name }}</view>
							</view>
						</view>
					</scroll-view>
					<view class="service-sra"  >
						<view class="service-item" @click="showTips = true" v-if="item.provide_services_id">
							<text class="service-item-title">{{$t('服务')}}</text>
							<template v-if="item.level == 3">
								<image v-if="item.provide_services_id.indexOf('3') != -1"
									src="@/static/icon/v3z1.png" mode="" class="w-35 h-35 ml-16"></image><!--3运输-->
								<image v-if="item.provide_services_id.indexOf('1') != -1"
									src="@/static/icon/v3z2.png" mode="" class="w-35 h-35 ml-16"></image><!--1报关-->
								<image v-if="item.provide_services_id.indexOf('6') != -1"
									src="@/static/icon/v3z3.png" mode="" class="w-35 h-35 ml-16"></image><!--6转关-->
								<image v-if="item.provide_services_id.indexOf('2') != -1"
									src="@/static/icon/v3z4.png" mode="" class="w-35 h-35 ml-16"></image><!--2清关-->
								<image v-if="item.provide_services_id.indexOf('4') != -1"
									src="@/static/icon/v3z5.png" mode="" class="w-35 h-35 ml-16"></image><!--4仓储-->
								<image v-if="item.provide_services_id.indexOf('5') != -1"
									src="@/static/icon/v3z6.png" mode="" class="w-35 h-35 ml-16"></image><!--5装卸-->
							</template>
							<template v-if="item.level == 2">
								<image v-if="item.provide_services_id.indexOf('3') != -1"
									src="@/static/icon/v2z1.png" mode="" class="w-35 h-35 ml-16"></image><!--3运输-->
								<image v-if="item.provide_services_id.indexOf('1') != -1"
									src="@/static/icon/v2z2.png" mode="" class="w-35 h-35 ml-16"></image><!--1报关-->
								<image v-if="item.provide_services_id.indexOf('6') != -1"
									src="@/static/icon/v2z3.png" mode="" class="w-35 h-35 ml-16"></image><!--6转关-->
								<image v-if="item.provide_services_id.indexOf('2') != -1"
									src="@/static/icon/v2z4.png" mode="" class="w-35 h-35 ml-16"></image><!--2清关-->
								<image v-if="item.provide_services_id.indexOf('4') != -1"
									src="@/static/icon/v2z5.png" mode="" class="w-35 h-35 ml-16"></image><!--4仓储-->
								<image v-if="item.provide_services_id.indexOf('5') != -1"
									src="@/static/icon/v2z6.png" mode="" class="w-35 h-35 ml-16"></image><!--5装卸-->
							</template>
							<template v-if="item.level == 1">
								<image v-if="item.provide_services_id.indexOf('3') != -1"
									src="@/static/icon/yellowCar.png" mode="" class="w-35 h-35 ml-16"></image><!--3运输-->
								<image v-if="item.provide_services_id.indexOf('1') != -1"
									src="@/static/icon/iconYe2.png" mode="" class="w-35 h-35 ml-16"></image>
								<!--1报关-->
								<image v-if="item.provide_services_id.indexOf('6') != -1"
									src="@/static/icon/iconYe3.png" mode="" class="w-35 h-35 ml-16"></image>
								<!--6转关-->
								<image v-if="item.provide_services_id.indexOf('2') != -1"
									src="@/static/icon/iconYe4.png" mode="" class="w-35 h-35 ml-16"></image>
								<!--2清关-->
								<image v-if="item.provide_services_id.indexOf('4') != -1"
									src="@/static/icon/iconYe5.png" mode="" class="w-35 h-35 ml-16"></image>
								<!--4仓储-->
								<image v-if="item.provide_services_id.indexOf('5') != -1"
									src="@/static/icon/iconYe6.png" mode="" class="w-35 h-35 ml-16"></image>
								<!--5装卸-->
							</template>
						</view>
						<view v-else></view>
						<view class="btn-sty">
							<image
								src="/static/mingpian/info.png"
							/>
							<view class="btn-txt" @click="call(item)">
								<text>{{$t('联系')}}TA</text>
							</view>
						</view>
					</view>
					<view class="btomxxx-show">
						<view class="left-s">
							<view class="li">
								<view class="duihao">
									<u-icon name="checkbox-mark"  size="14" color="#fff"></u-icon>
								</view>
								<text>{{$t('保证金')}}</text>
							</view>
							<view class="li">
								<view class="duihao">
									<u-icon name="checkbox-mark"  size="14" color="#fff"></u-icon>
								</view>
								<text>{{$t('运踪服务')}}</text>
							</view>
							<view class="li">
								<view class="duihao">
									<u-icon name="checkbox-mark"  size="14" color="#fff"></u-icon>
								</view>
								<text>{{$t('超时赔付')}}</text>
							</view>
						</view>
						<view class="chen">
							{{$t('已成交')}}：{{ item.order_count }}{{$t('笔')}}
						</view>
					</view>
					<!-- 黄金商家 -->
					<view class="gold-business">
						<image
							:src="memberLevel(item.level).imgurl"
						/>
						<view class="gold-business-title-text">{{memberLevel(item.level).name}}</view>
					</view>
				</template>
				<template v-else>
					<view class="base-info-w pb-24" @click="xuanzhong(item, idx)">
						<view class="img">
							<image
								:src="getImageUrl(item.avatar)"
								mode="aspectFill"
							/>
						</view>
						<view class="right-base-info">
							<view class="name">{{ lang == 'zh' ? item.username : item.username_ru  }}</view>
							<view class="infox">
								<text class="mr-28">登记车辆：{{item.car_count}}辆</text>
								<text>{{$t('已成交')}}：{{item.order_count}}{{$t('笔')}}</text>
							</view>
							<view class="address">
								<flag class="w-30 h-20 mr-4" :country="item.country" />
								<view class="address-text">{{ lang == 'zh' ? item.area.mergename :
												item.area.mergename_ru  }}</view>
							</view>
			
						</view>
					</view>
		
					<view class="service-sraxx" >
						<view class="start-wrapp">
							<view class="start">
								<image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
								<image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
								<image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
								<image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
								<image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
							</view>
							<view class="start-text">{{$t('综合评分')}}：{{ item.rating }}</view>
						</view>
						<view class="link-ta" @click="call(item)">
							<image
								src="/static/mingpian/linkx.png"
							/>
							<text>{{$t('联系')}}TA</text>
						</view>
					</view>
				</template>

			</view>


			<view style="height: 200rpx;"></view>
		</scroll-view>

	<!-- 展示报关 -->
		<u-popup :show="showTips" mode="center" @close="showTips = false" round="20rpx" :closeable="true">
			<view class="icon-wrapperxxxxx">
				<view class="icon" v-for="item in requireList" :key="index">
					<image :src="item.src" class="loxxgo" />
					<text>{{ item.name }}</text>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
import {
	business_card,
	business_cards
} from '@/api/user.js'
import {
	delivery_vehicle
} from '@/api/driver'
import citySelect from "@/pages/publish/components/citySelect.vue"
import { request_minute } from '@/api/basic'
import { memberLevel } from '@/utils/tool'
import VehicleSelect from 'pages/quotation/formControl/vehicleSelect.vue'
export default {
	components: {
		citySelect
	},
	props: {
		keyword: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			showTips: false,
			requireList: [
				{
					src: '/static/icon/car.png', //运输
					key: 1,
					name: this.$t('运输'),
				},
				{
					src: '/static/icon/excavator.png', //报关图
					key: 2,
					name: this.$t('报关'),
				},
				{
					src: '/static/icon/twoWay.png', //转关图
					key: 3,
					name: this.$t('转关'),
				},
				{
					src: '/static/icon/seal.png', //清关图
					key: 4,
					name: this.$t('清关'),
				},
				{
					src: '/static/icon/home.png', //仓储
					key: 5,
					name: this.$t('仓储'),
				},
				{
					src: '/static/icon/cart.png', //装卸
					key: 6,
					name: this.$t('装卸'),
				}
			],
			IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
			ossurl: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com',
			lang: 'zh',
			page: 1,
			limit: 10,
			lists: [],
			search_title: '',
			service_array: [
				this.$t('服务项'), this.$t('运输'), this.$t('报关'), this.$t('转关'), this.$t('清关'), this.$t('仓储'), this.$t('装卸')
			],
			service_index: 0,
			transport_array: [
				this.$t('运输项'), this.$t('公路运输'), this.$t('铁路运输'), this.$t('空运'), this.$t('海运')
			],
			carKindList: [{
				id: 0,
				title: this.$t('全部'),
				title_ru: this.$t('全部'),
			}],
			currentCar: '0',
			currentList: '0',
			transport_index: 0,
			pickerForm: {
				current_city_id: '',
				current_city_name: ''
			},
			statusBarHeight: uni.getStorageSync('statusBarHeight') || 0,

		}
	},
	computed: {
		addressList() {
			return [this.provinces, this.citys, this.areas];
		}
	},
	watch: {
		search_title(newValue, oldValue) {
			// 监听 name 的变化
			console.log('name 变化了', newValue);
		}
	},
	mounted() {
		if (uni.getStorageSync('lang')) {
			this.lang = uni.getStorageSync('lang')
		}
		this.search_title = this.keyword
		this.list(1)
	},
	methods: {
		getHeight() {
			return `calc(100vh - ${this.statusBarHeight}px - 190rpx)`
		},
		onStatus() {
			this.showTips = true;
			this.$forceUpdate();
		},
		memberLevel,
		selectVehicle(item, index){
			this.lists[index].vehicleSelectList.forEach(item2 => {
				item2.select = false;
			})
			item.select = !item.select;
			this.getDeliveryVehicle(item,this.lists[index].user_id,index)
			this.$forceUpdate();
		},
		getImageUrl(url = '') {
			console.log(url)
			if(url.indexOf('://') > -1) {
				return url
			} else {
				return this.IMAGE_URL + url
			}
		},
		onChangeArea(e) {
			this.pickerForm.current_city_id = [e.column1.value, e.column2.value, e.column3.value].join(',');
			this.pickerForm.current_city_name = e.column2.value == -1 || e.column3.value == -1 ?
									[e.column1.label, e.column2.label.replace(this.$t('全部'), ''), e.column3.label.replace(this.$t('全部'), '')].filter(item => item).join(',') :
									e.column3.label;
									this.page = 1
									this.list()
		},
		// 根据item内的图片id和已筛选的车辆类型的id做匹配，返回符合的
		findCarsById(arr, id) {
			if (id == 0) return arr;
			return arr.filter(item => item.car_category_id == id)
		},
		list(i = 0) {
			var that = this
			if (i == 1) {
				that.page = 1
			}
			var service_index = 0
			if (that.service_index == 1) {
				service_index = 3
			}
			if (that.service_index == 2) {
				service_index = 1
			}
			if (that.service_index == 3) {
				service_index = 6
			}
			if (that.service_index == 4) {
				service_index = 2
			}
			if (that.service_index == 5) {
				service_index = 4
			}
			if (that.service_index == 6) {
				service_index = 5
			}

			var transport_index = 0
			if (that.transport_index == 1) {
				transport_index = 1
			}
			if (that.transport_index == 2) {
				transport_index = 3
			}
			if (that.transport_index == 3) {
				transport_index = 2
			}
			if (that.transport_index == 4) {
				transport_index = 4
			}

			business_card({
				keyword: this.search_title,
				area_id: this.pickerForm.current_city_id,
				service_index: service_index,
				transport_index: transport_index,
				page: this.page,
				limit: this.limit
			}).then(res => {
				if (res) {
					// 为每个item添加一个checkedCarId值，用来控制每个item选择车辆类型时的筛选和image展示
					res.data.data.data.length > 0 && res.data.data.data.forEach(item => {
						item.checkedCarId = 0;
					})
					if (that.page == 1) {
						res.data.data.data = res.data.data.data.map(item => {
							item.checkedCarId = 0;
							
							item.vehicleSelectList =[
								{ id: '2', name: this.$t('汽运'),select: true },
								{ id: '3', name: this.$t('空运'),select: false },
								{ id: '4', name: this.$t('海运'),select: false },
								{ id: '5', name: this.$t('铁路'),select: false }]
							item.cars.forEach((item2,index)=>{
								item.vehicleSelectList[index].count = item2.count
							})
							return item;
						})
						that.lists = res.data.data.data
					} else {
						var list1 = res.data.data.data
						if (res) {
							that.lists = [...that.lists, ...list1]
						}
					}
				}
			})
		},
		call(info) {
			if(uni.getStorageSync("user_id") == info.user_id) {
				uni.showToast({
					title: this.$t('不能给自己打电话'),
					icon: "none",
				});
			} else {
			
				request_minute({
					user_id: uni.getStorageSync("user_id"),
					target_id: info.user_id,
				}).then(res => {
				if (res.data.data.flag == 1) {
					this.isMessageGo({
						action: 'call',
						data: {
							userId: info.user_id,
							type: res.data.data.type || 1,
						}
					})
				} else {
					uni.$u.toast('积分不足，请充值积分')
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/vip/scorePoint',
						})
					}, 500)
				}
			})
			
			}	
		},
		checkCarKind(indexCar, index) {
			this.currentCar = indexCar
			this.currentList = index
		},
		getDeliveryVehicle(item,user_id,index) {
			business_cards({
				user_id,
				mode: item.id,
			}).then(res => {
				if (res.data.code === 200) {
					this.lists[index].car = res.data.data.data
					this.$forceUpdate();
				}
			})
		},
		xuanzhong(item, index) {
			console.log('item---', item)
			uni.navigateTo({
				url: '/pages/forwardingInformation/cardDetail?u_id=' + item.user_id
			})
		},
		bindPickerChange(e) {
			this.service_index = e.detail.value
			this.page = 1
			this.list()
		},
		bindPickerChange2(e) {
			this.transport_index = e.detail.value
			this.page = 1
			this.list()
		},
		scrolltolowers(e) {
			console.log(e)
			if (this.lists.length === 0) {
				return
			}
			this.page++
			this.list()
		},

	}
}
</script>

<style lang="less">
page {
	background-color: #F6F7FB;
}

.infoSty2 {
	border-color: #5399F5 !important;

	.vipSty {
		background: linear-gradient(to right, #5399F5, #5399F5, #5399F5) !important;
	}

	.footerSty {
		background-color: #F4F7FF !important;
	}

	.yelloBtn {
		background: linear-gradient(to right, #5399F5, #6690FF, #385DF0) !important;
	}

	.activeBox {
		border-color: #5399F5 !important;
		color: #5399F5 !important;
		background-color: #E4F0FF !important;
	}
}

.infoSty3 {
	border-color: #B77CDF !important;

	.vipSty {
		background: linear-gradient(to right, #F0A2ED, #B77CDF, #BF6DDF) !important;
	}

	.footerSty {
		background-color: #FEF5FF !important;
	}

	.yelloBtn {
		background: linear-gradient(to right, #B479E0, #B793F6, #EBB1E8) !important;
	}

	.activeBox {
		border-color: #b47ce2 !important;
		color: #b47ce2 !important;
		background-color: #F5EBFF !important;
	}
}

.infoSty {
	width: 96%;
	flex-shrink: 0;
	border-radius: 26rpx;
	background: #FFF;
	border: 2rpx solid #FB0;
	margin: 16rpx auto 0;
	position: relative;

	// position: relative;
	.yelloBtn {
		width: 284rpx;
		height: 58rpx;
		flex-shrink: 0;
		background: linear-gradient(90deg, #FB0 0%, #FC7810 100%);
		border-radius: 500rpx;
		color: #FFF;
		font-family: "PingFang SC";
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 58rpx;
		/* 100% */
		text-align: center;
	}

	.footerSty {
		width: 100%;
		height: 48rpx;
		padding-bottom: 10rpx;
		background: #FFFBF4;
		margin: 0 auto;
		border-radius: 0 30rpx 30rpx !important;
		overflow: hidden;
	}




	.vipSty {
		width: 136rpx;
		position: absolute;
		right: 0;
		top: 0;
		height: 42rpx;
		border-radius: 0 20rpx 0 30rpx;

		image {
			width: 136rpx;
			height: 42rpx;
			flex-shrink: 0;
		}

		.vipText {
			position: absolute;
			top: 0;
			right: 40rpx;
			font-size: 22rpx;
			color: #fff;
			line-height: 40rpx;
		}

		// span{
		// 	color: #FFF;
		// 	font-family: "PingFang SC";
		// 	font-size: 22rpx;
		// 	font-style: normal;
		// 	font-weight: 600;
		// 	position: absolute;
	}

	// .vipSty::before {
	//   content: "VIP2";
	//   position: absolute;
	//   top: 50%;
	//   left: 50%;
	//   transform: translate(-50%, -50%);
	//   color: #fff; /* 文字颜色 */
	//   font-size: 22rpx; /* 文字大小 */
	// }
	.badgeSty {
		height: 28rpx;
		flex-shrink: 0;
		background: linear-gradient(90deg, #FFBB00 0%, #FC7810 100%);
		padding-left: 26rpx;
		border-radius: 7rpx;
		padding-right: 20rpx;
		color: #FFF;
		font-family: PangMenZhengDao;
		font-size: 20rpx;
		font-style: normal;
		font-weight: 400;
		text-align: center;
		margin-top: 5rpx;
		margin-left: -20rpx;
	}

	.hiddenSty {
		overflow: hidden;
		height: 60rpx;
		margin-top: 24rpx;
		// margin-bottom: 20rpx;
	}

	.carListBoxSty {
		// height: 50rpx;
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;

		.everybox {
			width: 140rpx;
			height: 60rpx;
			background-color: #F7F7F7;
			text-align: center;
			font-size: 22rpx;
			color: #1D1D1D;
			border-radius: 54rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.activeBox {
			border: 2rpx solid #FC7810;
			color: #FC7810;
			background-color: #FFEED0;
		}
	}

	.imgHidden {
		overflow: hidden;
		height: 160rpx;
		margin-top: 26rpx;
		margin-bottom: 20rpx;

		.imgListBox {
			display: flex;
			flex-wrap: nowrap;
			justify-content: flex-start;
			overflow-x: auto;
		}

		.everlyImgBox {
			height: 200rpx;
			width: 150rpx;
			background-color: #F7F7F7;
			color: #0E0E0E;
			font-size: 18rpx;
			line-height: 30rpx;
			text-align: center;
			border-radius: 15rpx;
			overflow: hidden;

			image {
				width: 150rpx;
				height: 120rpx;
			}
		}
	}
}

.boxListSty {
	width: 96%;
	/* height: 156rpx; */
	flex-shrink: 0;
	border-radius: 30rpx;
	background: #FFF;
	/* box-shadow: 0 4rpx 25.8rpx 0rpx rgba(166, 166, 166, 0.25); */
	/* backdrop-filter: blur(12.899999618530273rpx); */
	margin: 16rpx auto;
}


// {{$t('新的列表')}}
.newListSty {
	margin: 0 24rpx;
	background-color: #fff;
	box-shadow: 0px 4px 25.6px rgba(166, 166, 166, 0.25);
	border-radius: 26rpx;
	padding: 46rpx 0 24rpx 24rpx;
	margin-top: 16rpx;
	position: relative;
	.base-info-w {
		display: flex;
		align-items: center;
		.img {
			width: 84rpx;
			height: 84rpx;
			border-radius: 50%;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.right-base-info {
			flex: 1;
			margin-left: 18rpx;
			width: 0;
			.name {
				color: #0E0E0E;
				font-size: 28rpx;
				font-weight: 600;
			}
			.address {
				display: flex;
				align-items: center;
				margin-top: 10rpx;
				padding-right: 24rpx;
				.address-text {
					color: #8C8C8C;
					font-size: 20rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
			.start-wrapp {
				display: flex;
				align-items: center;
				margin-top: 10rpx;
				.start {
					display: flex;
					align-items: center;
					margin-right: 10rpx;
				
				}
				.start-text {
					color: #8C8C8C;
					font-size: 20rpx;
				}
			}
		}
	}
	.service-sraxx {
		padding-top: 20rpx;
		margin-right: 24rpx;
		border-top: 1px solid #f0f0f0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.start-wrapp {
			display: flex;
			align-items: center;
			margin-top: 10rpx;
			.start {
				display: flex;
				align-items: center;
				margin-right: 10rpx;
			
			}
			.start-text {
				color: #8C8C8C;
				font-size: 20rpx;
			}
		}
		.link-ta {
			display: flex;
			align-items: center;
			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 10rpx;
			}
			text {
				color: #8C8C8C;
				font-size: 24rpx;
			}
		}
	}
	.infox {
		text {
			color: #8C8C8C;
			font-size: 20rpx;
		}
	}
	.btomxxx-show {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		margin-right: 24rpx;
		border-top: 1px solid #f0f0f0;
		padding-top: 20rpx;
		.left-s {
			flex: 1;
			display: flex;
			align-items: center;
			.li {
				display: flex;
				align-items: center;
				margin-right: 24rpx;
				.duihao {
					width: 20rpx;
					height: 20rpx;
					margin-right: 4rpx;
					color: #fff;
					width: 18rpx;
					height: 18rpx;
					background-color: #FFC777;
					border-radius: 50%;
					font-size: 14rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				text {
					color: #8C8C8C;
					font-size: 20rpx;
				}

			}
		}
		.chen {
			color: #8C8C8C;
			font-size: 20rpx;
		}
	}
	.service-sra {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 20rpx;
		margin-right: 24rpx;
	
		.btn-sty {
			background: linear-gradient(90deg, #FF7000 0%, #FFA245 100%);
			box-shadow: -4px 4px 6px 0px rgba(255, 203, 151, 0.46) inset, -2px -3px 9.9px 0px #FFBE7C inset;
			width: 204rpx;
			height: 58rpx;
			border-radius: 29rpx;
			color: #FFF;
		
			display: flex;
			align-items: center;
			justify-content: center;
			image {
				width: 22rpx;
				height: 22rpx;
				margin-right: 10rpx;
			}
			.btn-txt {
				color: #FFF;
				font-size: 24rpx;
				font-weight: 400;
			}

		}
	}
	.tabs-listx {
		display: flex;
		align-items: center;
		margin-top: 24rpx;
		margin-bottom: 24rpx;
		justify-content: space-between;
		.tabxxx {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;
			width: 140rpx;	
			height: 50rpx;
			background-color: #F7F7F7;
			border-radius: 25rpx;
			&.active {
				border: 1px solid #278AFF;
				background: #D7E9FF;
				text {
					color: #278AFF;
					font-weight: 600;
				}
			}
			image {
				width: 34rpx;
				height: 34rpx;
				margin-right: 10rpx;
			}
			text {
				color: #0E0E0E;
				font-size: 24rpx;
			}
			
		}
	}
	.cart-wrax {
		display: flex;
		flex-wrap: nowrap;
		.carx {
			width: 150rpx;
			background-color: #F7F7F7;
			margin-right: 10rpx;
			flex-shrink: 0;
			overflow: hidden;
			image {
				width: 100%;
				height: 120rpx;
				border-top-left-radius: 8rpx;
				border-top-right-radius: 8rpx;
			}
			.txt {
				border-radius: 6rpx 6rpx 0px 0px;
				background: #F7F7F7;
				color: #0E0E0E;
				font-size: 18rpx;
				font-weight: 400;
				text-align: center;
				height: 40rpx;
				line-height: 40rpx;
			}
			.price {
				color: #0E0E0E;
				font-size: 20rpx;
				font-weight: 400;
				text-align: center;
			}


		}
	}
	.gold-business {
		width: 177rpx;
		height: 70rpx;
		position: absolute;
		right: 0;
		top: 0;
		background: url('/static/mingpian/gold.png') no-repeat center center;
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		font-size: 20rpx;
		box-sizing: border-box;
		padding-top: 8rpx;
		padding-left: 20rpx;
		image {
			width: 32rpx;
			height: 30rpx;
			margin-right: 6rpx;
			position: relative;
			top: -2rpx;
		}
		.gold-business-title-text {
			color: #FFF;
		}
	
	}
	&.level0 {
		padding-top: 28rpx;
	}
	&.level2 {
		.duihao {
			background: #B1D5FF !important;
		}
		.btn-sty {
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
			box-shadow: -4px 5px 6.5px 0px rgba(200, 251, 255, 0.46) inset, -2px -6px 9.9px 0px #71D0FF inset;
		}
		.gold-business {
			background: url('/static/mingpian/wite.png') no-repeat center center;
			background-size: 100% 100%;
		}
	}
	&.level3 {
		.duihao {
			background: #D392FF !important;
		}
		.btn-sty {
			background: linear-gradient(90deg, #410880 0%, #9464DD 100%);
			box-shadow: -4px 5px 6.5px 0px rgba(227, 200, 255, 0.46) inset, -2px -6px 9.9px 0px #B671FF inset;
		}
		.gold-business {
			background: url('/static/mingpian/zhanshi.png') no-repeat center center;
			background-size: 100% 100%;
		}
	}
	
}
.service-item {
	display: flex;
	align-items: center;
	.service-item-title {
		font-size: 26rpx;
		font-weight: 400;
	}

}

</style>